<template>
    <div style=" position: relative;">
        <el-card style="height: 88.3vh;">
            <div class="dept-list">
                <div class="list-item">
                    <div style="display:flex;margin-bottom:10px;">
                        <el-tag size="medium" effect="dark" type="warning"><b>部门</b></el-tag>
                        <div style="margin-left: 10px;" class="dgts-fm">
                            <el-button size="small" type="primary" icon="Plus" @click="add1_btn(1)">新增</el-button>
                            <el-button size="small" type="primary" icon="Edit" @click="up1_btn(1)">修改</el-button>
                            <el-button size="small" type="primary" icon="Delete" @click="del1_btn(1)">删除</el-button>
                        </div>
                    </div>
                    <el-table highlight-current-row ref="table1_name" :data="list1_data" row-key="id" default-expand-all
                        border fit :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                        @row-click="clickSingleRow" @select="checkSingleRow" @select-all="disableAllSel">
                        <!-- <el-table-column fixed="left" type="selection" width="40" align="center"></el-table-column> -->

                        <el-table-column label="部门名称">
                            <template #="{ row, column, $index }">
                                <span>{{ row.deptName }}</span>
                                <span class="dept-info" v-if="row.isDefault == 1">默</span>
                            </template>

                        </el-table-column>
                    </el-table>
                </div>
                <div class="list-item">
                    <div style="display:flex;margin-bottom:10px;">
                        <el-tag size="medium" effect="dark" type="success"><b>角色</b></el-tag>
                        <div style="margin-left: 10px;" class="dgts-fm">
                            <el-button size="small" type="primary" icon="Plus" @click="add2_btn(1)">新增</el-button>
                            <el-button size="small" type="primary" icon="Edit" @click="up2_btn(1)">修改</el-button>
                            <el-button size="small" type="primary" icon="Delete" @click="del2_btn(1)">删除</el-button>
                            <el-button size="small" type="primary" icon="Setting" @click="set3_btn(1)">权限设置</el-button>
                        </div>
                    </div>
                    <el-table highlight-current-row ref="table2_name" height="78vh" :data="list2_data" row-key="id"
                        default-expand-all border fit :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                        @row-click="clickSingleRow2">
                        <!-- <el-table-column fixed="left" type="selection" width="40" align="center"></el-table-column> -->

                        <el-table-column width="140" label="角色名称">
                            <template #="{ row, column, $index }">
                                <span>{{ row.roleName }}</span>
                                <span class="dept-info" v-if="row.isDefault == 1">默</span>
                            </template>

                        </el-table-column>
                        <el-table-column label="描述" prop="description"></el-table-column>

                    </el-table>
                </div>
                <div class="list-item">
                    <div style="display:flex;margin-bottom:10px;">
                        <el-tag size="medium" effect="dark" type="danger"><b>员工</b></el-tag>
                        <div style="margin-left: 10px;" class="dgts-fm">
                            <el-input clearable style="width: 150px;margin-right:20px;height:30px"
                                placeholder="员工姓名/手机号" maxlength="11" v-model="findStaffList_find_data.find"></el-input>
                            <el-select clearable style="width: 100px;margin-right:20px;height:30px"
                                v-model="findStaffList_find_data.staffState" placeholder="入职状态">
                                <el-option label="正式" value="NORMAL"></el-option>
                                <el-option label="试用" value="TRY"></el-option>
                                <el-option label="挂靠" value="DEPEND"></el-option>
                                <el-option label="兼职" value="SOMETIME"></el-option>
                                <el-option label="离职" value="LEAVE"></el-option>
                            </el-select>
                            <el-button size="small" type="primary" icon="Search" @click="find_btn(1)">搜索</el-button>
                            <el-button size="small" type="primary" icon="Setting" @click="set3_btn(2)">权限设置</el-button>
                        </div>
                    </div>
                    <el-table highlight-current-row ref="table3_name" height="77vh" :data="findStaffList_list"
                        row-key="id" default-expand-all border fit
                        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @row-click="clickSingleRow3">
                        <!-- <el-table-column fixed="left" type="selection" width="40" align="center"></el-table-column> -->

                        <el-table-column width="" label="员工姓名/手机号">
                            <template #="{ row, column, $index }">
                                <span>{{ row.staffName }}/{{ row.staffPhone }}</span>
                            </template>

                        </el-table-column>
                        <el-table-column width="" label="部门/角色">
                            <template #="{ row, column, $index }">
                                <span>{{ row.deptName }}/{{ row.roleName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column width="180" label="添加时间" prop="addTime">
                            <template #="{ row, column, $index }">
                                <span>{{ row.addTime }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

        </el-card>
    </div>

    <!-- 弹窗 -->
    <div>
        <!-- 部门添加修改 -->
        <el-dialog style="margin-top:5vh" v-model="add1_off" :title="title1" width="40%" :close-on-click-modal='false'>
            <el-form :model="add1_data" label-width="130px" label-suffix="：">
                <el-form-item v-if="table1_list[0] && up1_off" label="父级部门">
                    <el-input style="width: 220px;" :readonly="true" v-model="table1_list[0].deptName"
                        placeholder="请输入父级部门" />
                </el-form-item>
                <el-form-item label="部门名称">
                    <el-input style="width: 220px;" v-model="add1_data.deptName" placeholder="请输入部门名称" />
                </el-form-item>

            </el-form>


            <el-button @click="ok1_btn" style="margin-left:30vw" type="primary">确认提交</el-button>
        </el-dialog>
        <!-- 角色添加修改 -->
        <el-dialog style="margin-top:5vh" v-model="add2_off" :title="title2" width="40%" :close-on-click-modal='false'>
            <el-form :model="add2_data" label-width="130px" label-suffix="：">
                <el-form-item v-if="table2_list[0] && up2_off" label="父级部门">
                    <el-input style="width: 220px;" :readonly="true" v-model="table2_list[0].roleName"
                        placeholder="请输入父级部门" />
                </el-form-item>
                <el-form-item label="角色名称">
                    <el-input style="width: 220px;" v-model="add2_data.roleName" placeholder="请输入角色名称" />
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input style="width: 220px;" type="textarea" v-model="add2_data.description"
                        placeholder="请输入角色描述" />
                </el-form-item>
            </el-form>


            <el-button @click="ok2_btn" style="margin-left:30vw" type="primary">确认提交</el-button>
        </el-dialog>
        <!-- 添加修改 -->
        <el-dialog style="margin-top:5vh" v-model="add_off" :title="title" width="40%" :close-on-click-modal='false'>
            <el-form :model="add_data" label-width="130px" label-suffix="：">
                <el-form-item label="类型名称">
                    <el-input style="width: 220px;" v-model="add_data.typeName" placeholder="请输入休假类型" />
                </el-form-item>
                <el-form-item label="类型说明">
                    <el-input style="width: 220px;" type="textarea" v-model="add_data.note" placeholder="请输入休假类型说明" />
                </el-form-item>
            </el-form>


            <el-button @click="ok_btn" style="margin-left:30vw" type="primary">确认提交</el-button>
        </el-dialog>
        <!-- 权限设置 -->
        <el-dialog v-el-drag-dialog="{ drag: true, full: false, resize: false }" style="margin-top:5vh"
            v-model="set_off" :title="set_title" width="80%" :close-on-click-modal='false'>
            <el-tabs :stretch="true" :tab-position="'top'" model-value="tab0">
                <div style="height:40vh;overflow: auto;">
                    <el-tab-pane v-for="(it, i) in menuList" :key="i" :label="it.mName" :name="'tab' + i">
                        <!-- <keep-alive>
                            <TreeComponent :ref="treeRef" :it="it" :treeRef="treeRef" :checkedList="checkedList">
                            </TreeComponent>
                        </keep-alive> -->

                        <el-tree @check-change="handleCheckChange" :data="[it]" show-checkbox default-expand-all
                            node-key="id" :ref="treeRef" highlight-current
                            :props="{ children: 'children', label: 'mName' }"
                            :default-checked-keys="checkedList"></el-tree>
                    </el-tab-pane>
                </div>
            </el-tabs>


            <el-button @click="set_ok_btn" style="margin-left:70vw" type="primary">确认提交</el-button>
        </el-dialog>
    </div>
</template>


<script>
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import CircularJSON from 'circular-json'
import {
    line2treeData, scopy

} from '@/utils/common.js'
import {
    adupDept, findAllDeptList, delDept, getRoleList, getStaffPages, adupRole, delRole, findStaffList,
    getUserAllMenuList, getRoleAllMenuList, addUserMenu, addRoleMenu

} from '@/api/system_management.js'
import department_role from '@/store/department_role/index.js'
let $department_role = department_role()
export default {
    data() {
        return {

            findStaffList_find_data: {
                page: {
                    pageNum: 1,
                    pageSize: 999,
                },
                find: '',
                deptIds: [],
                roleIds: [],
                staffState: 'NORMAL',
            },
            set_title: '',
            set_off: false,
            lineMenuList: [],
            menuList: [],
            checkedList: [],
            treeRef: 'authMenuTree',
            set_ok_btn_off: '',
            table3_list: [],
            findStaffList_list: [],
            list_data: [],
            find_data: {
                page: {
                    pageNum: 1,
                    pageSize: 999,
                },
                typeName: '',
            },
            total: 0,
            table1_name: '',
            table1_list: [],
            list1_data: [],
            add1_off: false,
            title1: '添加部门',
            add1_data: {
                pid: "",
                deptName: '',
                id: '',
            },
            up1_off: true,
            list2_data: [],
            up2_off: true,
            add2_off: false,
            title2: '添加角色',
            add2_data: {
                deptId: "",
                description: '',
                id: '',
                roleName: "",
                pid: '',
            },
            table2_list: [],
            table3_list: [],
            list3_data: [],
            find3_data: {
                find: '',
                page: {
                    pageNum: 1,
                    pageSize: 999,
                },
                deptIds: '',
                roleIds: '',
            },
            add_off: false,
            title: '添加休假类型',
            add_data: {
                typeName: "",
                note: '',
                id: '',
            },
            table_list: [],

        }
    },
    created() {


    },
    mounted() {
        this.findAllDeptList_api()
        this.findStaffList_api()
    },
    methods: {
        findAllDeptList_api() {
            let that = this
            findAllDeptList({}).then(res => {
                that.list1_data = res.data
                that.list1_data = line2treeData(that.list1_data, 'pid')
            })
        },
        findStaffList_api() {
            let that = this
            findStaffList(that.findStaffList_find_data).then(res => {
                that.findStaffList_list = res.data.list
                // total.value = res.data.total
                // console.log(total.value)
            })
        },
        handleCheckChange(data, checked, indeterminate) {
            let that = this
            if (checked) {
                let index = that.checkedList.indexOf(data.id); // 获取元素的索引位置
                if (index == -1) {
                    that.checkedList.push(data.id)
                }

            } else {
                let index = that.checkedList.indexOf(data.id); // 获取元素的索引位置
                if (index !== -1) {
                    that.checkedList.splice(index, 1);
                }
            }

        },
        set3_btn(e) {
            let that = this
            that.set_ok_btn_off = e
            if (e == 2) {
                if (!that.table3_list[0]) {
                    return ElMessage({
                        message: '请选择角色的一条数据',
                        type: 'warning',
                    })
                }
                that.set_title = `设置【${that.table3_list[0].staffName}】 用户——功能权限`
                getUserAllMenuList({
                    userId: that.table3_list[0].userId
                }).then(res => {
                    if (res.code == 1) {
                        let data = res.data
                        that.lineMenuList = data
                        that.menuList = line2treeData(data, 'mPid')
                        that.checkedList = that.getLineListChecked(data)
                        // console.log('用户所有权限菜单列表', menuList.value);

                    } else {

                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }

                    // console.log(table3_list.value[0])

                })
            } else {
                if (!that.table2_list[0]) {
                    return ElMessage({
                        message: '请选择角色的一条数据',
                        type: 'warning',
                    })
                }
                that.set_title = `设置【${that.table2_list[0].roleName}】 角色——功能权限`
                getRoleAllMenuList({
                    roleOrUserId: that.table2_list[0].id
                }).then(res => {
                    if (res.code == 1) {
                        let data = res.data
                        that.lineMenuList = data
                        that.menuList = line2treeData(data, 'mPid')
                        that.checkedList = that.getLineListChecked(data)
                        console.log('用户所有权限菜单列表', that.menuList);

                    } else {

                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }



                })
                // console.log(table2_list.value[0])
            }


            that.set_off = true

        },
        getLineListChecked(lineList) {
            let vals = [];

            if (!lineList || lineList.length == 0) return vals;

            // 深度拷贝一份，防止更改源数据
            lineList = scopy(lineList);

            let map = {};
            // 遍历第一遍，以id为键，保存起来，方便获取
            lineList.forEach(it => {
                map[it.id] = it;
            });

            // 遍历第二遍，为父级添加子集   
            for (let it in map) {
                let c = map[it],
                    p = map[c.mPid];

                if (p) {
                    if (p.children) {
                        p.children.push(c);
                    } else {
                        p.children = [c];
                    }
                } else { // 不存在，则保存为顶级
                    c.children = [];
                }
            }

            for (let it in map) {
                let c = map[it];
                if (c.mCheck && !c.children) vals.push(c.id);
            }

            console.log('选中的结果', vals);

            return vals;
        },

        getAdupMenuIds(checkedIds) {
            let that = this
            let map = {};
            that.lineMenuList.forEach(it => map[it.id] = it);
            let checkedList = []; // 结果id数组
            let getObj = function (id) {
                let obj = map[id];
                if (obj) { // 存在对象，则保存id
                    if (checkedList.findIndex(a => a == obj.id) == -1) {
                        checkedList.push(obj.id);

                        getObj(obj.mPid);
                    };
                }
            };
            checkedIds.forEach(it => {
                getObj(it.id);
            });

            return checkedList;

        },

        //#endregion

        set_ok_btn() {
            let that = this
            let checkedNodeList = [];
            console.log(that.$refs.authMenuTree)
            that.$refs.authMenuTree.forEach(it => {

                checkedNodeList = checkedNodeList.concat(it.getCheckedNodes());
            });


            let checkedList = that.getAdupMenuIds(checkedNodeList);
            console.log('最终结果', checkedList);

            ElMessageBox.confirm(
                '确定保存所选择的功能权限？',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                    distinguishCancelAndClose: 'true',
                }
            )
                .then(() => {
                    // let set_ok_btn_off = JSON.parse(localStorage.getItem('lineMenuList'))
                    if (that.set_ok_btn_off == 2) {
                        addUserMenu({
                            menuIds: checkedList.join(','),
                            userId: that.table3_list[0].userId,
                        }).then(res => {
                            if (res.code == 1) {
                                this.set_off = false
                                return ElMessage({
                                    message: res.msg,
                                    type: 'success',
                                })
                            } else {
                                return ElMessage({
                                    message: res.msg,
                                    type: 'warning',
                                })
                            }
                        })
                    } else {

                        addRoleMenu({
                            menuIds: checkedList.join(','),
                            roleOrUserId: that.table2_list[0].id,
                        }).then(res => {
                            if (res.code == 1) {
                                this.set_off = false
                                return ElMessage({
                                    message: res.msg,
                                    type: 'success',
                                })
                            } else {
                                return ElMessage({
                                    message: res.msg,
                                    type: 'warning',
                                })
                            }
                        })
                    }

                })
                .catch((e) => {
                    if (e == 'cancel') {
                        ElMessage({
                            type: 'warning',
                            message: '取消成功',
                        })
                    }

                })


        },
        find_btn() {
            this.findStaffList_find_data.deptIds = []
            this.findStaffList_find_data.roleIds = []
            this.findStaffList_api()
        },
        size_change_btn() {
            this.find_data.page.pageNum = 1
        },
        current_change_btn() {
            this.list_api()
        },
        list_api() {
            // getLeaveTypeList(find_data).then(res => {
            //     list_data.value = res.data.list
            //     total.value = 20

            // })
        },
        // 全选失效
        disableAllSel(selection) {

            if (selection && selection.length > 0) {
                this.$refs.table1_name.clearSelection();

                // 清空选中的行数据
                this.table1_list = [];

            } else {
                return;
            }
        },
        // 单选
        clickSingleRow(row, column, event) {
            let index = this.table1_list.findIndex(it => row.id == it.id);
            if (index != -1) {
                // 已选中，则取消当前行的选中和高亮

                // 取消当前行选中
                this.$refs.table1_name.clearSelection();
                // 取消当前行高亮
                this.$refs.table1_name.setCurrentRow();
                // 保存选中的行数据
                this.table1_list = [];
            } else {
                // 取消当前行选中
                this.$refs.table1_name.clearSelection();
                // 选中当前行
                this.$refs.table1_name.toggleRowSelection(row, true);
                // 高亮选中
                this.$refs.table1_name.setCurrentRow(row);
                // 保存选中的行数据
                this.table1_list = [row];
            }

            // console.log('点击行选中的行数据', that[dgName].selRows);
            // 选中了一行，且不是同一行，才查询
            if (this.table1_list.length == 1) {
                this.findStaffList_find_data.deptIds = [row.id]
                this.getRoleList_api()
                this.findStaffList_api()
                // that.getStaffDgList({ roleIds: row.id });
            } else {
                // 清空角色列表
                this.list2_data = [];
                // 清空员工列表
                this.list3_data = [];
                this.findStaffList_find_data.deptIds = []
                this.findStaffList_find_data.roleIds = []
                this.findStaffList_find_data.find = ''
                this.findStaffList_api()
            }
        },
        getRoleList_api() {
            getRoleList({
                deptIds: this.table1_list[0].id
            }).then(res => {
                this.list2_data = res.data
                this.list2_data = line2treeData(this.list2_data, 'pid')
            })
        },
        // 【单选】 点击-部门列表行复选框
        checkSingleRow(selection, row) {
            if (selection.length > 0) { // 单行
                // 清空所有选中行
                this.$refs.table1_name.clearSelection();
                // 选中当前行
                this.$refs.table1_name.toggleRowSelection(row);
                // 高亮选中
                this.$refs.table1_name.setCurrentRow(row);
                // 保存选中的行数据
                this.table1_list = [row];
            } else { // 取消选中行
                // 保存选中的行数据
                this.table1_list = [];
                // 清空所有选中行
                this.$refs.table1_name.clearSelection();
                // 取消高亮选中
                this.$refs.table1_name.setCurrentRow();
            }
            // 选中了一行，且不是同一行，才查询
            if (this.table1_list.length == 1) {
                getRoleList_api()
                // 查询指定部门的所有员工
                // that.getStaffDgList({deptIds: row.id});
            } else {
                // 清空角色列表
                this.list2_data = [];
            }
        },

        //#endregion
        add1_btn(e, row) {
            this.title1 = '添加部门'
            this.add1_data.pid = ''
            this.add1_data.id = ''
            this.add1_data.deptName = ''
            // console.log(table1_list.value)
            if (this.table1_list[0]) {
                // console.log(table1_list.value)
                this.add1_data.pid = this.table1_list[0].id
            }

            this.add1_off = true

        },
        up1_btn(e, row) {
            this.up1_off = false
            // console.log(table1_list.value[0])
            if (!this.table1_list[0]) {
                return ElMessage({
                    message: '请选择部门的一条数据',
                    type: 'warning',
                })
            }
            this.title1 = '修改部门'
            this.add1_data.pid = this.table1_list[0].pid
            this.add1_data.id = this.table1_list[0].id
            this.add1_data.deptName = this.table1_list[0].deptName

            this.add1_off = true
        },
        // 提交
        ok1_btn() {
            if (!this.add1_data.deptName) {
                return ElMessage({
                    message: '请输入部门名称',
                    type: 'warning',
                })
            }
            if (this.title == '添加部门') {
                adupDept(this.add1_data).then(res => {
                    if (res.code == 1) {
                        this.findAllDeptList_api()
                        this.add1_off = false
                        return ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        this.add1_off = false
                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            } else {

                adupDept(this.add1_data).then(res => {
                    if (res.code == 1) {
                        this.findAllDeptList_api()
                        this.add1_off = false
                        return ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        this.add1_off = false
                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            }
            this.up1_off = true
        },
        //#region 删除
        del1_btn(e, row) {


            ElMessageBox.confirm(
                `是否确认删除【${this.table1_list[0].deptName}】部门?`, {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                distinguishCancelAndClose: 'true',
            }
            )
                .then(() => {
                    delDept({
                        id: this.table1_list[0].id
                    }).then(res => {
                        if (res.code == 1) {
                            this.table1_list = []
                            this.findAllDeptList_api()
                            return ElMessage({
                                message: res.msg,
                                type: 'success',
                            })
                        } else {
                            return ElMessage({
                                message: res.msg,
                                type: 'warning',
                            })
                        }
                    })
                })
                .catch((e) => {
                    if (e == 'cancel') {
                        ElMessage({
                            type: 'warning',
                            message: '取消成功',
                        })
                    }

                })

        },
        //#endregion
        getRoleList_api() {
            getRoleList({
                deptIds: this.table1_list[0].id
            }).then(res => {
                this.list2_data = res.data
                this.list2_data = line2treeData(this.list2_data, 'pid')
            })
        },
        add2_btn(e, row) {
            if (!this.table1_list[0]) {
                return ElMessage({
                    message: '请选择部门的一条数据',
                    type: 'warning',
                })
            }
            this.title2 = '添加角色'
            this.add2_data.deptId = table1_list[0].id
            this.add2_data.description = ''
            this.add2_data.roleName = ''
            this.add2_data.id = ''
            this.add2_data.pid = ''
            // console.log(table2_list.value)
            if (this.table2_list[0]) {
                // console.log(table2_list.value)
                this.add2_data.pid = this.table2_list[0].id
            }

            this.add2_off = true

        },
        up2_btn(e, row) {
            this.up2_off = false
            // console.log(table2_list.value[0])
            if (!this.table2_list[0]) {
                return ElMessage({
                    message: '请选择部门的一条数据',
                    type: 'warning',
                })
            }
            this.title2 = '修改角色'
            this.add2_data.pid = this.table2_list[0].pid
            this.add2_data.id = this.table2_list[0].id
            this.add2_data.roleName = this.table2_list[0].roleName
            this.add2_data.deptId = table2_list[0].deptId
            this.add2_data.description = table2_list[0].description
            this.add2_off = true
        },
        // 提交
        ok2_btn() {

            if (!this.add2_data.roleName) {
                return ElMessage({
                    message: '请输入角色名称',
                    type: 'warning',
                })
            }


            if (this.title == '添加角色') {

                adupRole(this.add2_data).then(res => {
                    if (res.code == 1) {
                        this.getRoleList_api()
                        this.add2_off = false
                        return ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        this.add2_off = false
                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            } else {

                adupRole(this.add2_data).then(res => {
                    if (res.code == 1) {
                        this.getRoleList_api()
                        this.add2_off = false
                        return ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        this.add2_off = false
                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            }
            this.up2_off = true
        },
        // 删除部门
        //#region 删除
        del2_btn(e, row) {


            ElMessageBox.confirm(
                `是否确认删除【${this.table2_list[0].roleName}】角色?`, {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                distinguishCancelAndClose: 'true',
            }
            )
                .then(() => {
                    delRole({
                        id: this.table2_list[0].id
                    }).then(res => {
                        if (res.code == 1) {
                            this.table2_list = []
                            this.getRoleList_api()
                            return ElMessage({
                                message: res.msg,
                                type: 'success',
                            })
                        } else {
                            return ElMessage({
                                message: res.msg,
                                type: 'warning',
                            })
                        }
                    })
                })
                .catch((e) => {
                    if (e == 'cancel') {
                        ElMessage({
                            type: 'warning',
                            message: '取消删除成功',
                        })
                    }

                })

        },
        //#endregion
        // 单选
        clickSingleRow2(row, column, event) {
            let index = this.table2_list.findIndex(it => row.id == it.id);
            if (index != -1) {
                // 已选中，则取消当前行的选中和高亮

                // 取消当前行选中
                this.$refs.table2_name.clearSelection();
                // 取消当前行高亮
                this.$refs.table2_name.setCurrentRow();
                // 保存选中的行数据
                this.table2_list = [];
            } else {
                // 取消当前行选中
                this.$refs.table2_name.clearSelection();
                // 选中当前行
                this.$refs.table2_name.toggleRowSelection(row, true);
                // 高亮选中
                this.$refs.table2_name.setCurrentRow(row);
                // 保存选中的行数据
                this.table2_list = [row];
            }

            // console.log('点击行选中的行数据', that[dgName].selRows);
            // 选中了一行，且不是同一行，才查询
            if (this.table2_list.length == 1) {
                this.findStaffList_find_data.roleIds = [row.id]
                this.findStaffList_api()
            } else {
                // 清空员工列表
                this.list3_data = [];
                this.findStaffList_find_data.roleIds = []
                this.findStaffList_find_data.find = ''
                this.findStaffList_api()
            }
        },
        // 单选
        clickSingleRow3(row, column, event) {
            let index = this.table3_list.findIndex(it => row.id == it.id);
            if (index != -1) {
                // 已选中，则取消当前行的选中和高亮

                // 取消当前行选中
                this.$refs.table3_name.clearSelection();
                // 取消当前行高亮
                this.$refs.table3_name.setCurrentRow();
                // 保存选中的行数据
                this.table3_list = [];
            } else {
                // 取消当前行选中
                this.$refs.table3_name.clearSelection();
                // 选中当前行
                this.$refs.table3_name.toggleRowSelection(row, true);
                // 高亮选中
                this.$refs.table3_name.setCurrentRow(row);
                // 保存选中的行数据
                this.table3_list = [row];
            }

        },
        getStaffPages_api() {
            let that = this
            getStaffPages(that.find3_data).then(res => {
                that.list3_data = res.data
            })
        },
        add_btn(e, row) {
            this.title = '添加休假类型'
            this.add_data.typeName = ''
            this.add_data.id = ''
            this.add_data.note = ''
            if (e == 1) {

            }

            this.add_off = true

        },
        selection_change_btn(e) {
            this.table_list = e
            console.log(e)
        },
        //#region 修改
        up_btn(row) {
            // if (table_list.value.length != 1) {
            //     return ElMessage({
            //         message: '请选择一条数据！',
            //         type: 'warning',
            //     })
            // }


            this.title = '修改休假类型'
            this.add_data.typeName = row.typeName
            this.add_data.id = row.id
            this.add_data.note = row.note
            this.add_off = true
        },
        //#endregion

        // 提交
        ok_btn() {
            let that = this
            if (!that.add_data.typeName) {
                return ElMessage({
                    message: '请输入休假类型名称',
                    type: 'warning',
                })
            }


            if (that.title == '添加休假类型') {

                adupLeaveType(that.add_data).then(res => {
                    if (res.code == 1) {
                        that.list_api()
                        that.add_off = false
                        return ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        that.add_off = false
                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            } else {

                adupLeaveType(that.add_data).then(res => {
                    if (res.code == 1) {
                        that.list_api()
                        that.add_off = false
                        return ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        that.add_off = false
                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            }
        },

        //#region 删除
        del_btn(e) {

            let that = this
            ElMessageBox.confirm(
                `是否确认删除【${e.typeName}】?`, {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                distinguishCancelAndClose: 'true',
            }
            )
                .then(() => {
                    delLeaveType({
                        id: e.id
                    }).then(res => {
                        if (res.code == 1) {
                            that.list_api()
                            return ElMessage({
                                message: res.msg,
                                type: 'success',
                            })
                        } else {
                            return ElMessage({
                                message: res.msg,
                                type: 'warning',
                            })
                        }
                    })
                })
                .catch((e) => {
                    if (e == 'cancel') {
                        ElMessage({
                            type: 'warning',
                            message: '取消删除成功',
                        })
                    }

                })

        }
        //#endregion







    },
}
</script>



<style scoped lang='scss'>
.dept-list {
    display: flex;

    .list-item:not(:last-child) {
        margin-right: 10px;
    }

    .list-item:nth-of-type(1) {
        width: 300px;
        overflow: auto;
        height: 83vh;
    }

    .list-item:nth-of-type(2) {
        width: 420px;
        overflow: auto;
        height: 83vh;
    }

    .list-item:nth-of-type(3) {
        overflow: auto;
        height: 83vh;
        flex: 1;
    }

    .list-title {
        font-size: 18px;
        color: #fff;
        font-family: 'Courier New', Courier, monospace;
        border: 1px solid #ff6300;
        border-radius: 5px;
        background: #ff6300;
    }

    .dept-info {
        position: absolute;
        bottom: calc((100% - 27px)/2);
        right: 0px;
        font-size: 12px;
        border: 1px solid #ff7300;
        border-radius: 3px;
        padding: 0px 2px;
        color: #ff6300;
        margin-right: 10px;
    }
}

.paddingLeft {
    padding-left: 24px;
}

.paddingLeft_3 {
    padding-left: 48px;
}
</style>
<style>
.el-table .el-table__cell {
    padding: 0px !important;
}
</style>

<style scoped>
:deep(.el-table__body tr.current-row>td) {
    color: #28A458;
    background: rgb(197, 213, 255) !important;
}
</style>
